<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>水位图</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <style>
        #container {
            position: relative;
            /* 添加相对定位 */
            width: 800px;
            margin: 0 auto;
        }

        #main {
            width: 800px;
            height: 400px;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="main"></div>
    </div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        // 定义水位数据
        const waterLevels = {
            坝顶高程: null,
            警戒水位: 142.6,
            当前水位: 60.03,
            死水位: 37.13
        };

        // 获取所有水位值（过滤掉null值）
        const waterValues = Object.values(waterLevels).filter(value => value !== null);

        // 计算y轴范围
        const yMin = Math.floor(Math.min(...waterValues) / 10) * 10; // 向下取整到最近的10的倍数
        const yMax = Math.ceil(Math.max(...waterValues) / 10) * 10; // 向上取整到最近的10的倍数
        const yInterval = (yMax - yMin) / 5; // 将范围分成5等份

        const terrainData = [
            [0, yMin], // 起点，从最低点开始
            [4, yMin], // 水平部分
            [5, yMax], // 上升到最高水位
            [7, yMax] // 水平延伸到末端
        ];

        const rzData = [
            [0, waterLevels.当前水位],
            [4, waterLevels.当前水位],
            [5, waterLevels.当前水位],
            [7, waterLevels.当前水位]
        ];

        // 修改 markLine 的显示逻辑
        function getMarkLine(name, value) {
            if (value === null) return {};  // 如果值为null，返回空对象
            return {
                label: {
                    formatter: `${name}: ${value}m`,
                    position: 'middle'
                },
                data: [{
                    yAxis: value,
                    lineStyle: {
                        type: 'dashed',
                        color: getLineColor(name)  // 获取对应的颜色
                    }
                }]
            };
        }

        // 获取线条颜色
        function getLineColor(name) {
            const colorMap = {
                '坝顶高程': '#2f4554',
                '警戒水位': '#c23531',
                '当前水位': '#61a0a8',
                '死水位': '#91c7ae'
            };
            return colorMap[name] || '#000000';
        }

        var option = {
            legend: {
                data: ['坝顶高程', '警戒水位', '当前水位', '死水位'],
                top: '5%',
                right: '5%',
                textStyle: {
                    color: '#333'
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '0%', // 增加底部空间以放置图片
                containLabel: true
            },
            xAxis: {
                type: 'value',
                min: 0,
                max: 7,
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#333'
                    },
                    margin: 24  // 减小标签与轴的距离
                },
            },
            yAxis: {
                type: 'value',
                min: yMin,
                max: yMax,
                interval: yInterval
            },
            series: [
                {
                    name: '地形',
                    type: 'line',
                    data: terrainData,
                    tooltip: {
                        show: false
                    },
                    showSymbol: false,
                    areaStyle: {
                        opacity: 1.6,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgb(228, 202, 160)'
                            },
                            {
                                offset: 1,
                                color: 'rgb(197, 173, 76)'
                            }
                        ])
                    },
                    lineStyle: {
                        width: 0
                    },
                    z: 2
                },
                {
                    name: '当前水位',
                    type: 'line',
                    data: rzData,
                    tooltip: {
                        show: false
                    },
                    showSymbol: false,
                    areaStyle: {
                        opacity: 0.9,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgb(47, 109, 200)'
                            },
                            {
                                offset: 1,
                                color: 'rgb(86, 169, 251)'
                            }
                        ])
                    },
                    lineStyle: {
                        width: 0
                    },
                    z: 1
                },
                {
                    name: '坝顶高程',
                    type: 'line',
                    markLine: getMarkLine('坝顶高程', waterLevels.坝顶高程)
                },
                {
                    name: '警戒水位',
                    type: 'line',
                    markLine: getMarkLine('警戒水位', waterLevels.警戒水位)
                },
                {
                    name: '当前水位',
                    type: 'line',
                    markLine: getMarkLine('当前水位', waterLevels.当前水位)
                },
                {
                    name: '死水位',
                    type: 'line',
                    markLine: getMarkLine('死水位', waterLevels.死水位)
                }
            ]
        };

        myChart.setOption(option);
        myChart.on('rendered', function () {
            var existingImg = document.querySelector('.chart-foot-img');
            if (existingImg) {
                existingImg.remove();
            }

            var chartDom = document.getElementById('main');
            var rect = chartDom.getBoundingClientRect();
            var gridComponent = myChart.getModel().getComponent('grid');
            var gridRect = gridComponent.coordinateSystem.getRect();

            var img = document.createElement('img');
            img.className = 'chart-foot-img';
            img.src = '/foot.png';

            img.onload = function () {
                console.log('图片加载成功');
            };

            img.onerror = function () {
                console.error('图片加载失败，请检查路径：./foot.png');
            };

            img.style.position = 'absolute';
            img.style.left = (gridRect.x) + 'px';  // 稍微向左偏移
            img.style.bottom = '16px';
            img.style.width = (gridRect.width) + 'px';  // 增加宽度
            img.style.height = '20px';
            img.style.zIndex = '999';
            img.style.objectFit = 'fill';  // 改为 fill 以填充整个区域

            document.getElementById('container').appendChild(img);
        });
    </script>
</body>

</html>